<template>
  <p style="display: inline-block;background-color: #edeff4">
    <file-outlined />
    {{ state.info && state.info.fileName }}
    <slot
        name="operate"
        :info="state.info"
    >
      <a :href="href">下载</a>
    </slot>
  </p>
</template>

<script lang="ts" setup>
import { getAttachment } from '@/api/file'
import { computed, reactive, watch } from 'vue'
import { FileOutlined } from '@ant-design/icons-vue'

const props = defineProps({
  attachmentId: {
    type: String,
    required: true
  }
})

const state = reactive({
  info: {}
})

const loadData = async () => {
  // state.info = await getAttachment(props.attachmentId)
}

watch(() => props.attachmentId, () => { loadData() })

const href = computed(() => {
  // return `${import.meta.env.VITE_API_BASE_URL}/file/download/${props.attachmentId}`
})

loadData()
</script>
